<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
</head>
<body>
<h2>聊天室</h2>
<!-- 消息区域 -->
<div id="content"></div>
<form id="f2">
    <input type="text" id="message"/>
    <input type="button" value="send"/>
</form>
<script src="../js/jquery-1.9.1.min.js"></script>
<script>
    //实例化websocket的实例
    let ws = new WebSocket("ws://202.182.125.24:17755/ws/connect");

    //握手连接方法,在这个方法中执行心跳检查（有特殊需求场景时才设置）
    ws.onopen = function(){
        //创建定时器
        let timer = window.setInterval(function (){
            //执行心跳检查，防止连接自动断开
            ws.send("ping");
        }, 30000);
    }

    //接收服务端发送回来的消息
    ws.onmessage = function(event) {
        //从event中获取消息对象（包括发送人和消息的内容）
        //注意：将json字符串转换成json对象
        let data = $.parseJSON(event.data);
        $('#content').append(data.sendUser + " : " + data.message+"<br>");
    }
    //发送消息
    $(function(){
        //绑定单击事件
        $(':button').on('click', function(){
            //获取消息文本框的内容
            let msg = $('#message').val();
            //通过websocket发送给服务端
            ws.send(msg);
            //清空文本框
            $('#message').val('');
        });
    })
</script>
</body>
</html>